import {useState,useRef,useMemo} from 'react'
import Todoinput from './todoInput'
import Todolist from './todoList'
import Todooptions from './todoOptions'
// data的类型
export type Item = {
    id: string
    todo:string
    completed:boolean
}

let initialState: Array<Item> = [
    {
        id:'1',
        todo:'学react',
        completed:true
    },
    {
        id:'2',
        todo:'学hook',
        completed:true
    }
]

// 枚举三个状态
export enum states {
    all,
    completed,
    unCompleted
}

const Container = () => {
    // 列表数据
    let [data,setData] = useState<Array<Item>>(initialState)

    // 声明选项状态
    let [state,setState] = useState<states>(states.all)

    // 数量统计
    let [counts,setCounts] = useState<Array<number>>([])

    // 声明todoInput组件中input输入框的状态
    let [val,setVal] = useState<string>('')

    // 一个函数，用于让todoinput组件将输入值回传到当前组件
    // let hangdleInputChange = (val:string) => {
    //     // console.log(val);
    //     setVal(val)
    // }

    // 声明ref
    const ipt = useRef<string | null>(null)

    // 传递一个函数给子组件todoInput，在todoInput点击提交按钮触发
    let addTodo = () => {
        // console.log(ipt);
        // 声明一个对象
        let item:Item = {
            id:Math.random().toString(32).substring(2),
            todo:ipt.current!,
            completed:false,
        }
        // 添加逻辑
        setData([item,...data])
    }

    // 删除
    let del = (id:string) => {
        console.log(id);
        // 在data中过滤掉id和传入id相同的选项
        let newData = data.filter((item:Item) => {
            return item.id !== id
        })
        setData(newData)    
    }

    // 勾选
    let checkIn = (checked:boolean,id:string) => {
        console.log(checked);
        console.log(id);
        // 通过id到data中找到对应的数据，把completed变成checked

        let target:Item | undefined = data.find((item:Item) => {
            return item.id === id
        })
        // console.log(target);
        target!.completed = checked
        setData([...data])
    }

    // 选项按钮的切换
    let changeState = (states:states) => {
        console.log(states);
        setState(states)
    }
    // 使用缓存钩子
    let filterData = useMemo<Array<Item> | undefined>(()=>{
        switch(state){
            case 0:
                // 返回全部
                return [...data]
            case 1:
                // 已完成的
                return data.filter((item:Item)=>{
                    return item.completed
                })
            case 2:
                // 未完成的
                return data.filter((item:Item)=>{
                    return !item.completed
                })
        }
    },[state,data])

    // 计算数量
    let countsArr = useMemo<Array<number>>(()=>{ 
        // 全部的数量
        let all:number = data.length

        // 已完成数量
        let completed:number = (data.filter((item:Item)=>{
            return item.completed
        })).length

        // 未完成数量
        let unCompleted:number = (data.filter((item:Item)=>{
            return !item.completed
        })).length

        return [all,completed,unCompleted]
    },[data])

    console.log(countsArr);
    
    return(
        <fieldset>
            <legend>容器组件</legend>
            {/* <Todoinput val={val} onInputChange={hangdleInputChange}/> */}
            <Todoinput ref={ipt} onAddTodo={addTodo}/>
            <Todolist data={filterData} onDel={del} onCheckIn={checkIn}/>
            <Todooptions onChangeState={changeState} countsArr={countsArr}/>
        </fieldset>
    )
}
export default Container